<template>
	<div class="swiper s-swiper">
	    <ul class="swiper-wrapper">
	        <li class="swiper-slide" v-for="it in imglist" :key="it.id">
				<img :src="it.url" />
			</li>
	    </ul>
	    <div class="swiper-pagination swiperone-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
	</div>
</template>

<script>
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	export default{
		name:'SwiperOne',
		props:['propswiperone'],
		data(){
			return{
				imglist:[]
			}
		},
		updated(){
			new Swiper('.s-swiper',{
				//循环播放
				loop:true,
				//设置分页器效果
				pagination:{
					el:'.swiperone-pagination'
				},
				//设置播放项：时间，不停止，手指
				autoplay:{
					delay:2000,
					stopOnLastSlide:false,
					disableOnInteraction:false
				}
				
			})
		},
		watch:{
			propswiperone(){
				this.imglist=this.propswiperone
			}
		}
	}
</script>

<style scoped>
	.s-swiper{
		width: 100%;
		height: 6.5rem;
		padding-top: 0.5rem;
	}
	.s-swiper img{
		width: 100%;
		height: 100%;
	}
	.swiperone-pagination :deep(.swiper-pagination-bullet-active) {
		background: white;
	}
</style>
